<template>
	<view class="content">
		<view class="sousuo">
			<navigator url="../../index/srchFor/srchFor">
				<u-search
					:show-action="false"
					clearabled
					placeholder="请输入您所需要的产品名称"
					v-model="keyword"
					bgColor="#FFFFFF;"
				></u-search>
			</navigator>
			<view class="kabao">
				<!-- <view class="info">
					<view class="view1">
						<text>￥{{ data.zon_mon == null ? 0 : data.zon_mon }}</text>
					</view>

					<text class="text">猩猩省钱</text>
					<text class="text1">(总免单金)</text>
				</view> -->
				<view class="info">
					<view class="view2">
						<text>￥{{ data.use_mon == null ? 0 : data.use_mon }}</text>
					</view>
					<text class="text">已省钱</text>
					<text class="text1">(已使用)</text>
				</view>
				<!-- <view class="info">
					<view class="view1">
						<text>￥{{ data.due_mon==null  ?  0  :  data.due_mon }}</text>
					</view>
					<text class="text">本能多省</text>
					<text class="text1">(已过期)</text>
				</view> -->
				<view class="info">
					<view class="view2">
						<text>￥{{ data.on_mon == null ? 0 : data.on_mon }}</text>
					</view>
					<text class="text">未来可省</text>
					<text class="text1">(进行中)</text>
				</view>
			</view>
		</view>

		<view v-for="(i, index) in data.info" :key="index">
			<view class="list">
				<view class="info">
					<view class="top1">
						<view class="left"><image :src="i.cover" mode=""></image></view>
						<view class="right">
							<view class="right1">
								<view class="" @click="storeIntroduction(i.id)" style="flex: 5;">{{ i.name }}</view>
								<view style="flex: 4.5; justify-content: space-between; display: flex;" >
									<image
										src="../../../static/zhu111.png"
										mode=""
										@click="getLocationBulletBox(i.id)"
									></image>
									<text class="text">{{ i.num }}/{{ i.full }}</text>
								</view>
							</view>
							<view class="right2">
								<text  @click="storeIntroduction(i.id)">已售{{ i.sold }}</text>
								<text  @click="storeIntroduction(i.id)">人均￥{{ i.price }}/人</text>
								<!-- <text  @click="storeIntroduction(i.id)">点评:{{ i.review }}</text> -->
							</view>
							<view class="right3">
								<text>{{ i.type }}</text>
								<text class="text">{{ i.site }}</text>
								<text>{{ i.changdu }}km</text>
							</view>
							<view class="right4">
								<text>{{ i.free}}</text>
								<!-- <text>5折</text> -->
								<text @click="confirmBuyOrdr(i.id)">买单</text>
							</view>
							<!-- <view class="right5"><text>活动时间:永久</text></view> -->
						</view>
					</view>
					<view class="button">
						<view class="name">餐厅环境</view>
						<view class="shuxian"></view>
						<view class="showPictures">
							<view v-for="(item1, index1) in i.atlas" :key="index1" >
								<image :src="item1" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- tank -->
		<view class="tankuang" v-if="isTouming">
			<view class="box">
				<image src="../../../static/guanbi.png" mode="" class="image" @click="isTouming = false"></image>
				<text class="text">{{ bulletInfo.name }}</text>
				<view class="info1">
					<image src="../../../static/ss2.png" mode=""></image>
					<text>{{ bulletInfo.phone }}</text>
				</view>
				<view class="info1">
					<image src="../../../static/ss3.png" mode=""></image>
					<text>{{ bulletInfo.site }}</text>
				</view>
				<view class="info1">
					<image src="../../../static/ss1.png" mode=""></image>
					<text>{{ bulletInfo.site_time == null ? '' : bulletInfo.site_time }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword: '',
			uid: "",
			isTouming: false,
			data: {},
			bulletInfo: {},
			zon_mon: 0,
			use_mon: 0,
			on_mon: 0
		};
	},
	methods: {
		//计算赌徒距离
		calculateDistance(lat1, lng1, lat2, lng2) {
			var radLat1 = (lat1 * Math.PI) / 180.0;
			var radLat2 = (lat2 * Math.PI) / 180.0;
			var a = radLat1 - radLat2;
			var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
			var s =
				2 *
				Math.asin(
					Math.sqrt(
						Math.pow(Math.sin(a / 2), 2) +
							Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)
					)
				);
			s = s * 6378.137;
			s = Math.round(s * 10000) / 10000;

			s = s.toFixed(2);
			return s;
		},

		//跳转门店介绍
		storeIntroduction(id) {
			uni.navigateTo({
				url: '../introduction/introduction?id=' + id
			});
		},
		//获取卡包
		async getTheCrdPack() {
			const res = await this.$u.post('api/shop/shop_card', {
				uid: this.uid
			});
			console.log('数据>>  ', res.data);
			this.data = res.data;
			this.data.info.forEach((e, index) => {
				try {
					const userLocation = uni.getStorageSync('userLocation');
					if (userLocation) {
						var _this = this;
						var list = userLocation.split(',');
						var longitude1 = list[0];
						var latitude2 = list[1];
						
						var juli = this.calculateDistance(longitude1, latitude2, e.longitude, e.dimension);
						console.log('当前的距离>> ', juli);
						_this.data.info[index].changdu = juli;
					}
				} catch (e) {
					// error
				}
			});
		},
		// 确认买单
		confirmBuyOrdr(id) {
			uni.navigateTo({
				url: '../details/details?sid=' + id
			});
		},
		//获取位置弹框
		async getLocationBulletBox(sid) {
			this.isTouming = true;
			const { data: res } = await this.$u.post('api/shop/shop_site', {
				sid: sid
			});
			this.bulletInfo = res;
			console.log('this.bulletInfo >>  ', this.bulletInfo);
		}
	},
	onLoad() {
		try {
			const uid = uni.getStorageSync('uid');
			if (uid) {
				this.uid = uid;
				console.log('this.uid :>> ', this.uid);
			}
		} catch (e) {
			// error
		}
		this.getTheCrdPack();
	}
};
</script>

<style lang="scss" scoped>
.content {
	.tankuang {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;

		.box {
			position: relative;
			width: 560rpx;
			height: 400rpx;
			background: #ffffff;
			border-radius: 20rpx;
			margin-top: 362rpx;

			.text {
				display: block;
				height: 85rpx;
				line-height: 85rpx;
				text-align: center;
				font-size: 36rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 500;
				color: #333333;

				border-bottom: 2rpx solid #c7c7c7;
			}

			.info1 {
				display: flex;
				align-items: center;
				margin-top: 35rpx;
				margin-left: 50rpx;

				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 31rpx;
				}

				text {
					font-size: 30rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}

			.image {
				position: absolute;
				right: -60rpx;
				top: -60rpx;
				width: 71rpx;
				height: 71rpx;
			}
		}
	}

	.sousuo {
		width: 100vw;
		height: 405rpx;
		border-radius: 0 0 20rpx 20rpx;
		background: linear-gradient(180deg, #ffa73d, #fff);
		padding: 10rpx 30rpx;

		.kabao {
			width: 690rpx;
			height: 300rpx;
			margin-top: 30rpx;
			background: #ffffff;
			box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
			border-radius: 20rpx;
			padding: 30rpx 20rpx;
			display: flex;
			justify-content: space-around;

			.info {
				display: flex;
				flex-direction: column;
				align-items: center;

				.view1 {
					// white-space:normal ;
					white-space: pre-wrap; /* 规定文本是否折行 */
					overflow: hidden; /* 规定超出内容宽度的元素隐藏 */
					// text-overflow: ellipsis;
					width: 140rpx;
					height: 140rpx;
					line-height: 140rpx;
					text-align: center;
					border: 2rpx solid #ffad42;
					box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
					border-radius: 50%;
					text {
						display: inline-block;
						width: 140rpx;
						//white-space:normal
						// white-space: pre-wrap; /* 规定文本是否折行 */
						// overflow: hidden; /* 规定超出内容宽度的元素隐藏 */
						// text-overflow: ellipsis;
					}
				}
				.view2 {
					white-space: pre-wrap; /* 规定文本是否折行 */
					overflow: hidden; /* 规定超出内容宽度的元素隐藏 */
					width: 140rpx;
					height: 140rpx;
					line-height: 140rpx;
					text-align: center;
					border: 2rpx solid #fb5a69;
					color: #fb5a69;

					box-shadow: 0px 0px 18px 0px rgba(51, 51, 51, 0.1);
					border-radius: 50%;
					text {
						display: inline-block;
						width: 140rpx;
						//white-space:normal
						// white-space: pre-wrap; /* 规定文本是否折行 */
						// overflow: hidden; /* 规定超出内容宽度的元素隐藏 */
						// text-overflow: ellipsis;
					}
				}

				.text {
					display: block;
					font-size: 30rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 80rpx;
				}

				.text1 {
					display: block;
					font-size: 24rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 9rpx;
				}
			}
		}
	}

	.list {
		background-color: #f8f8f8;
		padding: 30rpx;

		.info {
			width: 690rpx;
			// height: 576rpx;
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx 20rpx 0 20rpx;

			.top1 {
				display: flex;

				.left {
					width: 201rpx;
					height: 241rpx;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.right {
					width: 430rpx;

					.right1 {
						height: 30rpx;
						line-height: 30rpx;
						display: flex;
						justify-content: space-between;
						margin-bottom: 19rpx;

						view {
							height: 30rpx;
							font-size: 30rpx;
							font-family: 'Microsoft YaHei', PingFang SC;
							font-weight: 500;
							color: #333333;
						}

						image {
							width: 90rpx;
							height: 30rpx;
						}

						.text {
							width: 80rpx;
							height: 40rpx;
							line-height: 38rpx;
							text-align: center;
							border: 1rpx solid #ff0000;
							border-radius: 20rpx;
							font-size: 24rpx;
							font-family: 'Microsoft YaHei', PingFang SC;
							font-weight: 500;
							color: #ff0000;
							margin-top: -7rpx;
						}
					}

					.right2 {
						height: 23rpx;
						font-size: 24rpx;
						font-family: 'Microsoft YaHei', PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-bottom: 19rpx;
						display: flex;
						justify-content: space-between;
					}

					.right3 {
						height: 23rpx;
						font-size: 24rpx;
						font-family: 'Microsoft YaHei', PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-bottom: 19rpx;
						display: flex;
						justify-content: space-between;
						margin-bottom: 47rpx;
						.text {
							width: 240rpx;
							text-align: center;
							height: 35rpx;
							white-space: nowrap; /* 规定文本是否折行 */
							overflow: hidden; /* 规定超出内容宽度的元素隐藏 */
							text-overflow: ellipsis;
						}
					}

					.right4 {
						margin-bottom: 11rpx;
						display: flex;
						justify-content: space-between;
						text {
							display: inline-block;
							text-align: center;
							color: #fefefe;
						}

						text:nth-child(1) {
							width: 136rpx;
							height: 40rpx;
							line-height: 40rpx;

							background: linear-gradient(90deg, #ff6494 0%, #ffa86a 100%);
							border-radius: 5rpx;
							margin-right: 20rpx;
						}

						// text:nth-child(2) {
						// 	width: 80rpx;
						// 	height: 40rpx;
						// 	line-height: 40rpx;
						// 	background: linear-gradient(180deg, #ff6494 0%, #ffa86a 100%);
						// 	border-radius: 5rpx;
						// 	margin-right: 100rpx;
						// }

						text:nth-child(2) {
							width: 85rpx;
							height: 40rpx;
							line-height: 40rpx;
							background: #ff0000;
							border-radius: 20rpx;

							font-size: 24rpx;
							font-family: 'Microsoft YaHei', PingFang SC;
							font-weight: bold;
							color: #fefefe;
						}
					}

					.right5 {
						text {
							width: 344rpx;
							height: 19rpx;
							font-size: 20rpx;
							font-family: 'Microsoft YaHei', PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
				}
			}

			.button {
				.name {
					width: 118rpx;
					height: 28rpx;
					font-size: 29rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-top: 28rpx;
				}

				.shuxian {
					width: 120rpx;
					height: 8rpx;
					background: linear-gradient(90deg, #ffa73d, #ffdd65);
					border-radius: 4rpx;
					margin-top: 10rpx;
				}

				.showPictures {
					display: flex;
					// justify-content: space-between;
					flex-wrap: wrap;
					margin-top: 10rpx;
				
					image {
						width: 200rpx;
						height: 200rpx;
						margin-right: 20rpx;
					}
					view:nth-child(3n){
						image{
							
						margin-right: 0;
						}
					}
				}.showPictures {
					display: flex;
					// justify-content: space-between;
					flex-wrap: wrap;
					margin-top: 10rpx;

					image {
						width: 200rpx;
						height: 200rpx;
						margin-right: 20rpx;
					}
					view:nth-child(3n){
						image{
							
						margin-right: 0;
						}
					}
				}
			}
		}
	}
}
</style>
